import React, { useState } from 'react';
import { Layout, Dropdown, Avatar, Badge, Space, Menu, Breadcrumb } from 'antd';
import {
  UserOutlined,
  BellOutlined,
  LogoutOutlined,
  SettingOutlined,
  HomeOutlined
} from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import { useAdminAuth } from '../../hooks/useAuth';
import './Layout.css';

const { Header } = Layout;

const AdminHeader = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { user, logout } = useAdminAuth();
  const [notifications] = useState([
    { id: 1, title: '新订单提醒', content: '您有5个新订单待处理', time: '5分钟前', read: false },
    { id: 2, title: '库存预警', content: '商品"iPhone 15"库存不足', time: '1小时前', read: false },
    { id: 3, title: '系统更新', content: '系统将于今晚12点进行维护', time: '2小时前', read: true }
  ]);

  const unreadCount = notifications.filter(n => !n.read).length;

  const handleLogout = () => {
    logout();
    navigate('/admin/login');
  };

  const userMenu = (
    <Menu>
      <Menu.Item key="profile" icon={<UserOutlined />} onClick={() => navigate('/admin/profile')}>
        个人中心
      </Menu.Item>
      <Menu.Item key="settings" icon={<SettingOutlined />}>
        系统设置
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item key="logout" icon={<LogoutOutlined />} onClick={handleLogout}>
        退出登录
      </Menu.Item>
    </Menu>
  );

  const notificationMenu = (
    <Menu className="notification-menu">
      <Menu.Item key="header" disabled>
        <div style={{ padding: '8px 0', fontWeight: 'bold' }}>
          通知中心 {unreadCount > 0 && `(${unreadCount}条未读)`}
        </div>
      </Menu.Item>
      <Menu.Divider />
      {notifications.map(notification => (
        <Menu.Item key={notification.id} className={!notification.read ? 'unread' : ''}>
          <div style={{ width: 280 }}>
            <div style={{ fontWeight: !notification.read ? 'bold' : 'normal' }}>
              {notification.title}
            </div>
            <div style={{ fontSize: '12px', color: '#999', marginTop: '4px' }}>
              {notification.content}
            </div>
            <div style={{ fontSize: '12px', color: '#999', marginTop: '4px' }}>
              {notification.time}
            </div>
          </div>
        </Menu.Item>
      ))}
      <Menu.Divider />
      <Menu.Item key="all" style={{ textAlign: 'center' }}>
        查看全部通知
      </Menu.Item>
    </Menu>
  );

  // 生成面包屑
  const getBreadcrumbItems = () => {
    const pathSnippets = location.pathname.split('/').filter(i => i);
    const breadcrumbItems = [];

    const breadcrumbNameMap = {
      'admin': '首页',
      'products': '商品管理',
      'orders': '订单管理',
      'users': '用户管理',
      'admin-users': '管理员管理',
      'categories': '分类管理',
      'roles': '角色权限',
      'refunds': '售后管理',
      'logs': '操作日志',
      'profile': '个人中心'
    };

    pathSnippets.forEach((snippet, index) => {
      if (snippet === 'admin' && index === 0) {
        breadcrumbItems.push(
          <Breadcrumb.Item key="home">
            <HomeOutlined />
            <span style={{ marginLeft: 4 }}>首页</span>
          </Breadcrumb.Item>
        );
      } else if (breadcrumbNameMap[snippet]) {
        breadcrumbItems.push(
          <Breadcrumb.Item key={snippet}>
            {breadcrumbNameMap[snippet]}
          </Breadcrumb.Item>
        );
      }
    });

    return breadcrumbItems;
  };

  return (
    <Header className="admin-header">
      <div className="header-content">
        <div className="header-left">
          <Breadcrumb>
            {getBreadcrumbItems()}
          </Breadcrumb>
        </div>
        
        <div className="header-right">
          <Space size={24}>
            <Dropdown overlay={notificationMenu} placement="bottomRight" trigger={['click']}>
              <div className="header-action">
                <Badge count={unreadCount} size="small">
                  <BellOutlined style={{ fontSize: 18 }} />
                </Badge>
              </div>
            </Dropdown>
            
            <Dropdown overlay={userMenu} placement="bottomRight">
              <div className="header-user">
                <Avatar 
                  size="small" 
                  icon={<UserOutlined />}
                  style={{ backgroundColor: '#1890ff', marginRight: 8 }}
                />
                <span>{user?.nickname || user?.username || '管理员'}</span>
              </div>
            </Dropdown>
          </Space>
        </div>
      </div>
    </Header>
  );
};

export default AdminHeader;